import React from 'react';
import {
  Table,
  Icon,
  Button,
  DatePicker,
  Row,
  Col,
  LocaleProvider,
  List,
  Select,
  Card,
} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { connect } from 'dva';

const Option = Select.Option;

@connect(state => ({
  logs: state.logs,
}))
class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      deviceId: null,
    };
  }

  /**
   * 获取所有设备列表
   */
  getAllDevices = () => {
    this.props.dispatch({
      type: 'logs/getAllDevices',
      payload: {},
      callback: data => {
        this.setState(
          {
            deviceId: data.id,
          },
          () => this.getList()
        );
      },
    });
  };

  getList = () => {
    const { deviceId } = this.state;
    this.props.dispatch({
      type: 'logs/getRealTimeLogs',
      payload: {
        deviceId,
      },
    });
  };

  select = value => {
    this.setState({
      deviceId: value,
    });
  };

  componentDidMount() {
    this.getAllDevices();
  }

  render() {
    const {
      logs: { realTimeList, loading, allDevices },
    } = this.props;
    const { deviceId } = this.state;

    return (
      <>
        <h3 className="head">实时日志</h3>
        <div style={{ padding: '10px 20px' }}>
          <div>
            <span>设备:</span>
            <Select
              value={deviceId}
              onChange={this.select}
              style={{ width: '150px', marginLeft: '10px' }}
            >
              {allDevices.map(item => (
                <Option value={item.id} key={item.id}>
                  {item.deviceName}
                </Option>
              ))}
            </Select>
            <Button className="ml10" onClick={this.getList} type="primary" icon="redo">
              刷新
            </Button>
          </div>

          <Card bordered bodyStyle={{padding:"10px"}} className="mt20">
            <List
              loading={loading}
              dataSource={realTimeList}
              renderItem={(item, index) => <List.Item key={index}>{item}</List.Item>}
            />
          </Card>
        </div>
      </>
    );
  }
}

export default Pages;
